<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04猜数字练习</title>
</head>
<body>
<h1>已生成一个1~100的随机数:</h1>
<input type="text">
<button onclick="guess()">点我验证</button>
<button onclick="get()">重新获取随机数</button>
<h1>小提示：<span style></span></h1>

<script>
    let n=parseInt(Math.random()*100)+1;
    console.log(n);
    let a=0;
    function get(){
        n=parseInt(Math.random()*100)+1;
        console.log(n);
        a=0;
    }
    function guess(){
        let p=document.querySelector('input').value;
        //isNaN()用来判断参数是否为非数字，如果是非数字，结果为true，否则为false
        //正斜杠（/）用来包裹正则表达式
        //^ 表示开头，$ 表示结尾,\d 表示数字 + 表示至少一个
        //.test()用来判断字符串是否匹配前面的正则表达式，匹配则返回true，否则返回false
        // if(isNaN(p)){
        if(!/^\d+$/.test(p)){
            alert('请输入数字');
            return;
        }
        a++;
        let s=document.querySelector('span')
        console.log(s);
        // let p=parseInt(i);
        if(p==n){
            s.style.color='#0f0';
            s.innerHTML='你猜了'+a+'次猜对了';
            return;
        }else if(p>n){
            s.style.color='#f00';
            s.innerHTML='猜大了！';
            return;
        }else{
            s.style.color='#f00';
            s.innerHTML='猜小了！';
            return;
        }
    }
</script>
</body>
</html>